<template>
  <el-row :gutter="20" :loading="loading" >
    <!-- 左侧树 -->
    <el-col :span="4" :xs="24">
      <ContentWrap class="h-1/1">
        <DsTree @node-click="handleDeptNodeClick" />
      </ContentWrap>
    </el-col>
    <el-col :span="20" :xs="24">
      <!-- 搜索 -->
      <ContentWrap>
        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
          <el-form-item prop="tableName" label="表名">
            <el-input v-model="queryParams.tableName" placeholder="请输入数据库表名" clearable @keyup.enter="handleQuery"
              class="!w-240px" />
          </el-form-item>
        </el-form>
      </ContentWrap>
      <ContentWrap>
        <el-tabs v-model="activeName" @tab-click="tabHandleClick">
          <el-tab-pane label="数据集列表" name="first" key="first">
            <ds-table :ds-id="dsId" />
          </el-tab-pane>
          <el-tab-pane label="数据库表信息" name="second" key="second">
              <el-table :data="list">
                <el-table-column label="表名" align="left" key="tableName" prop="tableName" />
                <el-table-column label="操作" align="center" width="320">
                  <template #default="scope">
                    <div class="flex items-center justify-center">

                      <el-button link @click="openForm('update', scope.row.id)">
                        <Icon icon="ep:view" />查看详细
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
          </el-tab-pane>
        </el-tabs>
      </ContentWrap>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import * as dataApi from '@/api/data/dscategory'
import * as dsApi from '@/api/data/ds'
import DsTree from './DsTree.vue'

import DsTable from '../dstable/index.vue'


defineOptions({ name: 'DataDs' })

const message = useMessage() // 消息弹窗 // 国际化


const activeName = ref('first') // 选中的tab
const formVisible = ref(false) // 弹窗的是否展示
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数
const dslist = ref([]) // 数据集列表
const dsId = ref(0) // 数据集ID



// --------------------------------------------------------------------------数据表相关 -------------------------------------------------
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  tableName: undefined,
  dsId: undefined,
  createTime: []
})
const queryFormRef = ref() // 搜索的表单

/** 查询列表 */
const getList = async () => {
  if(queryParams.dsId === undefined) {
    message.warning('请先选择数据源')
    return
  }
  loading.value = true
  try {
    const data = await dataApi.DsCategoryApi.getTableList(queryParams)

    console.log('data', data)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}


/** 处理部门被点击 */
const handleDeptNodeClick = async (row) => {
  queryParams.dsId = row.id
  dsId.value = row.id
  console.log('row', row)
  await getList()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  // formRef.value.open(type, id)
  formVisible.value = true
}

/** 关闭弹窗操作 */
const handleClose = () => {
  formVisible.value = false
}

//-----------------------------------------------------------数据集相关 -------------------------------------------------
// const getDsList = async () => {
//   loading.value = true
//   try {
//     const data = await dsApi.DsApi.getDsList(queryParams)
//     dslist.value = data.list
//     total.value = data.total
//   } finally {
//     loading.value = false
//   }
// }



const tabHandleClick = (tab, event) => {
  if (tab.name === 'first') {
    queryParams.dsId = undefined
  } else {
    queryParams.dsId = undefined
  }
}


/** 初始化 */
onMounted(() => {
  getList()
  // getDsList();
})
</script>
